<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      [v-cloak] {
        display: none;
      }
      .box {
        width: 200px;
        height: 200px;
      }
      .bg {
        background: rebeccapurple;
      }
      .font {
        color: royalblue;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h6>{{msg}}</h6>
      <input type="text" v-model="msg" />

      <hr />
      <h1 v-cloak>{{msg}}</h1>

      <hr />

      <div class="box">{{msg}}</div>
      <div v-bind:class="box">{{msg}}</div>

      <img src="01.jpg" alt="" />
      <img :src="img" alt="" />

      <div class="box bg font">{{msg}}</div>
      <div :class="['box',box,'font']">{{msg}}</div>
      <!-- 动态绑定多个类名的时候可以用数组绑定 加引号的就是字符串本身 不加“”的就是变量 -->

      <!-- 绑定多个类名除了可以用数组还可以用 {} -->
      <!-- {"name":"小明"} -->
      <div :class="{box:flag,bg:flag,font:!flag}">{{msg}}</div>
      <!-- 动态绑定类名 对象形式的key值加不加引号都是 字符串 -->

      <div :style="{background: red}">{{msg}}</div>

      <!-- 变成了动态之后 就是加了 ： 不加''的是变量，加了'' 是字符串本身 ，如果是对象的key 加不加引号都是字符串 -->
    </div>
    <script src="vue-2.4.0.js"></script>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          msg: "hello world",
          box: "bg",
          img: "01.jpg",
          flag: true,
          red: "blue",
        },
      });
      // 5. v-model 双向数据绑定 只针对于表单元素（只有表单元素能改变视图）

      // 6.v-cloak 解决插值闪烁 在vuejs文件被加载完成后会自己把自己删掉

      //7.v-bind  动态绑定属性 动态的意思就是把一个固定的字符串变成了一个变量  可以简写为 ：
    </script>
  </body>
</html>
